<template>
  <div class="app-container">
    <el-card>
      <el-tabs>
        <el-tab-pane label="信息查询">
          <el-button class="auto-distribute" type="success" size="small" @click="updateLiveList">一键分配</el-button>
          <el-button class="single" type="primary" size="small" @click="openSingle">单人入住</el-button>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字查询">
              <el-input v-model="queryParam" prefix-icon="el-icon-search" style="width: 230px;" placeholder="请输入学生的学号或者姓名查询" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" size="small" @click="query">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            :data="tablelist.slice((page.pageCode-1)*page.pageSize, page.pageCode*page.pageSize)"
            :default-sort="{prop: 'stuID', order: 'ascending'}"
            fit
            highlight-current-row
            style="width: 100%; height:max-height;"
            stripe
          >
            <el-table-column label="姓名" prop="name" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="学号"
              prop="stuID"
              sortable
              align="center"
              width="150"
            >
              <template slot-scope="{ row }">
                <span>{{ row.stuID }}</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" prop="sex" align="center">
              <template slot-scope="{ row }">
                <el-tag v-if="row.sex==='男'">男</el-tag>
                <el-tag v-if="row.sex==='女'" type="warning">女</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="身份证号" prop="idCard" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.idCard }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="tel" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.tel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="楼栋" prop="dormitoryBuild" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.dormitoryBuild }}</span>
              </template>
            </el-table-column>
            <el-table-column label="寝室" prop="dormitory" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.dormitory }}</span>
              </template>
            </el-table-column>
            <el-table-column label="床位" prop="bed" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.bed + '号床' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button type="danger" size="mini" @click="handleGone(row)">退宿</el-button>
                <el-button type="warning" size="mini" @click="handleUpadte(row)">换寝</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="getList"
            :current-page="page.pageCode"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tablelist.length"
            style="width:100%;text-align:center; margin-top:1%"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogUpdateVisible" width="40%">
            <span class="updatedialog-span">{{ '姓名：'+ studentInfo.name }}</span>
            <span class="updatedialog-span">{{ '学号：'+ studentInfo.stuID }}</span>
            <span class="updatedialog-span">{{ '宿舍：'+ studentInfo.dormitoryBuild + studentInfo.dormitory }}</span>
            <span class="updatedialog-span">{{ '床位：'+ studentInfo.bed + '号床' }}</span>
            <el-divider />
            <el-table :data="updateTable" highlight-current-row height="300" @current-change="selectCall">
              <el-table-column type="index" width="55" />
              <el-table-column label="宿舍楼" prop="dormitoryBuild" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.dormitoryBuild }}</span>
                </template>
              </el-table-column>
              <el-table-column label="寝室号" prop="dormitory" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.dormitory }}</span>
                </template>
              </el-table-column>
              <el-table-column label="床位号" prop="bed" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.bed }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogUpdateVisible = false">取消</el-button>
              <el-button type="primary" @click="updateStudents()">修改</el-button>
            </div>
          </el-dialog>
          <el-dialog title="单人入住" :visible.sync="dialogSingleVisible" width="30%">
            <el-table
              :data="singleTable"
              highlight-current-row
              height="300"
              @current-change="singleCurrentChange"
            >
              <el-table-column
                type="index"
                width="50"
              />
              <el-table-column label="学号" prop="stuID" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.stuID }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" prop="name" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="性别" prop="sex" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.sex }}</span>
                </template>
              </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogSingleVisible = false">取 消</el-button>
              <el-button type="primary" @click="nextStep">下一步</el-button>
            </span>
          </el-dialog>
          <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogSingleLiveVisible" width="40%">
            <el-table
              :data="singleLiveTable"
              highlight-current-row
              height="300"
              @current-change="singleLiveCurrentChange"
            >
              <el-table-column
                type="index"
                width="50"
              />
              <el-table-column label="宿舍楼" prop="dormitoryBuild" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.dormitoryBuild }}</span>
                </template>
              </el-table-column>
              <el-table-column label="寝室号" prop="dormitory" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.dormitory }}</span>
                </template>
              </el-table-column>
              <el-table-column label="床位号" prop="bed" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.bed }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogSingleLiveVisible = false">取消</el-button>
              <el-button type="primary" @click="insertSingleLive">确定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="上传新增">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-upload
                class="upload-demo"
                action=""
                :on-change="handleChange"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :limit="1"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                :auto-upload="false"
              >
                <el-button type="primary" round>点击上传Excel新增</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button type="primary" round @click="dialogAddVisible=true">单独上传<i class="el-icon-upload el-icon--right" /></el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            :data="history.slice((addPage.pageCode-1)*addPage.pageSize, addPage.pageCode*addPage.pageSize)"
            :default-sort="{prop: 'stuID', order: 'descending'}"
            fit
            highlight-current-row
            style="width: 100%; height:max-height;"
            stripe
            border
          >
            <el-table-column label="姓名" prop="name" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="学号"
              prop="stuID"
              align="center"
              width="150"
            >
              <template slot-scope="{ row }">
                <span>{{ row.stuID }}</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" prop="sex" align="center">
              <template slot-scope="{ row }">
                <el-tag v-if="row.sex==='男'">男</el-tag>
                <el-tag v-if="row.sex==='女'" type="warning">女</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="身份证号" prop="idCard" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.idCard }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="tel" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.tel }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="addList"
            :current-page="addPage.pageCode"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="addPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="history.length"
            style="width:100%;text-align:center; margin-top:1%"
            @size-change="handleAddSizeChange"
            @current-change="handleAddCurrentChange"
          />
          <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddVisible" width="40%" @close="cancelDialog('dataForm')">
            <el-form
              ref="dataForm"
              :model="addForm"
              label-position="center"
              label-width="20%"
              style="width: 80%; height: 100%; margin: 0 auto"
            >
              <el-form-item label="学生姓名:" prop="name">
                <el-input v-model="addForm.name" placeholder="请输入学生的姓名" />
              </el-form-item>
              <el-form-item label="学生学号:" prop="stuID">
                <el-input v-model="addForm.stuID" placeholder="请输入学生的学号" />
              </el-form-item>
              <el-form-item label="学生性别:" prop="sex">
                <el-radio-group v-model="addForm.sex">
                  <el-radio :label="'男'">男</el-radio>
                  <el-radio :label="'女'">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="身份证号:" prop="idCard">
                <el-input v-model="addForm.idCard" maxlength="18" placeholder="请输入学生的身份证号" />
              </el-form-item>
              <el-form-item label="联系方式:" prop="tel">
                <el-input v-model="addForm.tel" maxlength="11" placeholder="请输入学生的联系电话" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelDialog('dataForm')">取消</el-button>
              <el-button type="primary" @click="addStudentInfo">新增</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
</script>

<style>
  .app-container {
    margin: 0 auto;
  }
  .demo-form-inline {
    float: right;
  }
  .auto-distribute {
    float: left;
    margin-top: 0.5%;
  }
  .single {
    margin-top: 0.5%;
  }
  .singleInput {
    width: 200px;
  }
  .updatedialog-span {
    margin-right: 2%;
  }
</style>
